<template>
	<view class="row">
		<template v-for="(item, index) of pageData">
			<button v-if="isShow(item.linkUrl)" :open-type="item.linkUrl == 'concat' ? 'contact' : ''" :key="index" class="u-reset-button item" @click="goItem(item)">
				<view class="icon_box">
					<image v-if="item.image" class="icon" mode="aspectFill" :src="item.image" />
					<view v-else :style="{ color: item.color || vuex_config.themeColor1 }" :class="['icon', 'iconfont', item.icon]"></view>
				</view>
				<view class="title">{{ item.title }}</view>
				<view class="iconfont iconfont-e775 icon-you"></view>
			</button>
		</template>
	</view>
</template>

<script>
	import { userTemplate } from './userTemplate.js';
	export default {
		mixins: [userTemplate],
		computed: {
			isShow(linkUrl) {
				return function(linkUrl) {
					if(this.filterObj[linkUrl]){
						let str = this.filterObj[linkUrl]
						return this[str]
					}else{
						return true
					}
				};
			}
		},
		mounted(){
			console.log('sadsad',this.pageData)
		},
		methods: {
			goItem(item) {
				this.$emit('groupItemGo', item);
			}
		}
	};
</script>

<style scoped lang="scss">
	@import './index.scss';

	.row {
		overflow: hidden;
		background: #fff;
		padding: 0 20rpx;
		position: relative;
		.item {
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			padding: 26rpx 0;
			align-items: center;
			box-sizing: border-box;
			.icon {
				margin-right: 20rpx;
				width: 44rpx;
				height: 44rpx;
				font-size: 42rpx;
				text-align: center;
				color: var(--color);
			}

			.title {
				text-align: left;
				flex: 1;
				overflow: hidden;
			}

			.icon-you {
				text-align: right;
				color: #999;
			}
		}
	}

	/* #ifdef MP-ALIPAY */
	.u-reset-button {
		border: 0;

	}

	/*  #endif  */
</style>
